<template lang='pug'>
div
  div.demo-upload-list(v-for='item in uploadList')
    template(v-if='item.status === "finished"')
      img(:src='item.url')
      div.demo-upload-list-cover
        Icon(type='ios-eye-outline', @click.native='handleView(item)')
        Icon(type='ios-trash-outline', @click.native='handleRemove(item)')
    template(v-else)
      Progress(v-if='item.showProgress', :percent='item.percentage', hide-info)
  Upload(
    ref="upload"
    name='files[]'
    :show-upload-list="false"
    :default-file-list="defaultList"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png']"
    :max-size="800"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    multiple
    type="drag"
    :action="action"
    style="display: inline-block;width:58px;")
      div(style="width: 58px;height:58px;line-height: 58px;")
        Icon(type="plus" size="20")
  div(style='line-height: 1.5') 请上传大小不超过800k的图片，图片格式必须为jpg, jpeg, png，图片最多上传5张。

  Modal(v-model='visible')
    img.img-responsive(:src='imgUrl', v-if='visible')

</template>
<script>
import http from '@/apis/http'

export default {
  model: {
    prop: 'defaultList',
    event: 'change'
  },
  props: {
    defaultList: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      action: http.baseURL + 'fd/file/upload',
      imgUrl: '',
      visible: false,
      uploadList: []
    }
  },
  computed: {
    fileDataList () {
      console.log('refs', this.$refs.upload.fileList)
      console.log(this.uploadList)
      return this.$refs.upload.fileList.map(file => {
        return {
          fid: file.fid,
          name: file.name,
          url: file.url
        }
      })
    }
  },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
  },
  updated () {
    this.uploadList = this.$refs.upload.fileList
  },
  methods: {
    handleView (item) {
      this.imgUrl = item.url
      this.visible = true
    },
    handleRemove (file) {
      this.$Modal.confirm({
        title: '删除图片吗',
        render: h => {
          return h('img', {
            class: {
              'img-responsive': true
            },
            style: {
              width: '200px',
              height: 'auto'
            },
            attrs: {
              src: file.url
            }
          })
        },
        onOk: () => {
          const fileList = this.$refs.upload.fileList
          this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
          this.$emit('change', this.fileDataList)
        }
      })
    },
    handleSuccess (res, file, fileList) {
      file.name = res.name
      file.fid = res.fid
      file.url = res.url
      this.$emit('change', this.fileDataList)
      console.log(this.uploadList)
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 800k。'
      })
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 5 张图片。'
        })
      }
      return check
    }
  }
}
</script>
<style>
  .demo-upload-list{
      display: inline-block;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0,0,0,.2);
      margin-right: 4px;
  }
  .demo-upload-list img{
      width: 100%;
      height: 100%;
  }
  .demo-upload-list-cover{
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
      display: block;
  }
  .demo-upload-list-cover i{
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
  }
</style>
